<template>
    <div id="container"></div>
</template>
<script setup lang="ts">
import { reactive,onMounted } from 'vue';
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/Addons.js"
import globalGeoJson from "@/assets/geojson/countries.json"

const data = reactive({

})
let scene:THREE.Scene
const init3D = (canvasDOM:HTMLDivElement) => {
    scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)    
    camera.position.set(-10,20,-20)
    scene.add(camera)
    
    const earthGeometry = new THREE.SphereGeometry(5,30,30)
    const earthMaterial = new THREE.MeshBasicMaterial({
        color:0x4466ff,
        // wireframe:true
        transparent:true,
        opacity:0.5,
    })
    const earthMesh = new THREE.Mesh(earthGeometry,earthMaterial)
    scene.add(earthMesh)

    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth,window.innerHeight)
    canvasDOM.appendChild(renderer.domElement)
    
    const axesHelper = new THREE.AxesHelper( 500 );
    scene.add( axesHelper );
    const controls = new OrbitControls(camera,canvasDOM)
    createMap2()
    const animation = () => {        
        renderer.render(scene,camera)
        requestAnimationFrame(animation)
    }
    animation()
    
}

const createMap = () => {
    // console.log("globalGeoJson:",globalGeoJson.features);
    fetch("https://geojson.cn/api/china/china.json").then(res=>{
        return res.json()
    }).then(json=>{
        globalGeoJson.features.slice(0,10).forEach((feature:any) => {
            if (feature.geometry.type === 'Polygon' || feature.geometry.type === 'MultiPolygon') {
                const geometry = new THREE.BufferGeometry();
                // if( feature.geometry.type === 'Polygon' ){
                //     feature.geometry.coordinates = [feature.geometry.coordinates]
                // }
                const coordinates = feature.geometry.coordinates
                console.log("coordinates",coordinates);
                
                const vertices = <any[]>[]
                coordinates.forEach((contries:any) => {
                    contries.forEach((polygon:any)=>{
                        polygon.forEach((coord:any) => {
                            const lat = coord[1];
                            const lon = coord[0];
                            const phi = (90 - lat) * (Math.PI / 180);
                            const theta = (lon + 180) * (Math.PI / 180);
                            const radius = 5;
                            const x = -radius * Math.sin(phi) * Math.cos(theta);
                            const y = radius * Math.cos(phi);
                            const z = radius * Math.sin(phi) * Math.sin(theta);
                            vertices.push(new THREE.Vector3(x,y,z))
                        });
                    })
                    geometry.setFromPoints( vertices );
                    const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
                    const line = new THREE.Line(geometry, material);
                    scene.add(line);
                    
                });
                
            }
        });
    })
}
const createMap2 = () => {
    fetch("https://geojson.cn/api/china/china.json").then(res=>{
        return res.json()
    }).then(json=>{
        let map = new THREE.Group()
        // console.log("globalGeoJson.features ",globalGeoJson.features );
        json.features.forEach((feature:any)=>{
            let coordinates = feature.geometry.coordinates
            if( feature.geometry.type === "Polygon" ){
                coordinates = [feature.geometry.coordinates]
            }
            const vertices = <any[]>[]
            coordinates.forEach((contry:any)=>{
                // console.log("contry:",contry);
                contry.forEach((polygon:any)=>{
                    polygon.forEach((coord:any) => {
                        const lat = coord[1];
                        const lon = coord[0];
                        const phi = (90 - lat) * (Math.PI / 180);
                        const theta = (lon + 180) * (Math.PI / 180);
                        const radius = 5;
                        const x = -radius * Math.sin(phi) * Math.cos(theta);
                        const y = radius * Math.cos(phi);
                        const z = radius * Math.sin(phi) * Math.sin(theta);
                        vertices.push(x,y,z)
                    });
                })
                
            })
            // console.log("vertices:",vertices);
            const geometry = new THREE.BufferGeometry()
            geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array(vertices),3) );
            
            const material = new THREE.MeshBasicMaterial( { color: 0xff0000,side:THREE.DoubleSide } );
            const mesh = new THREE.Line( geometry, material );
            map.add(mesh)
        })
        scene.add(map)
    })
    
    
}
onMounted(()=>{
    const canvasDOM:HTMLDivElement = document.getElementById("container")!
    init3D(canvasDOM)
})
</script>